<template>
<div>
      <vheader></vheader>
   <div class="start-movie">
     <router-link to="/" class="v-nav">正在热映</router-link>
     <router-link to='/UpcomingM' class="v-nav">即将热映</router-link>
   </div>
    <loading v-if="loading"></loading>
   <div  v-if="!loading" class="movie-message" v-for="movie in MovieList" v-on:click="goDetlid(movie.id)">
   <div class="b">
     <div class="hb">
       <img v-bind:src="movie.images.small">
     </div>
     <div class="data-m">
       <h2>{{movie.title}}</h2>
       <div class="star">
          <star :num="movie.rating.stars"></star>
       </div>
       <div>
         <p class="numb">评分:{{movie.rating.average}}分</p>
         <p class="director">导演:{{movie.directors[0].name}}</p>
         <p class="actor">
             主演:<span v-for="cast in movie.casts">{{cast.name}} </span>
         </p>
       </div>
     </div>
     </div>
   </div>
 </div>
</template>
<script>
import vheader from "./vheader/vheader"
  import star from "./star"
  import loading from "./loading"
export default {
  name:'MovieList',
  data () {
    return {
      movie_message:'',
      loading:true,
      MovieList:[]
    }
  },
  components:{
    star:star,
    loading:loading,
    vheader:vheader
  },
  mounted(){
    this.$http.jsonp('https://api.douban.com/v2/movie/in_theaters')/*
    this.$http.get('http://localhost:8080/static/data.json')*/.then(function(response){
        this.loading=false
        this.MovieList = response.body.subjects;
    })
  },
  methods:{
    goDetlid:function(id){
      this.$router.push({name:'MovieDetlid',params:{id:id}})
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only 尽在当前页面使用-->
<style scoped>
  .movie-message{
    padding: 10px 20px;
    overflow: hidden;
    background: #f8f8f8;
  }
  .movie-message .b{
    padding-bottom: 10px;
    overflow: hidden;
    border-bottom: 1px solid #d6d6d6;
  }
  .hb{
    float: left;
    padding-top: 5px;
  }
  .hb img{
    padding-right: 20px;

  }
  .hb .data-m{
    float: left;
  }
  .data-m h2{
    color: #2c3e50;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .data-m p{
    font-size: 12px;
    color: #666;
    line-height: 20px;
  }
  .data-m .star-item img{
    width: 14px;
    height: 14px;
  }
</style>
